<div *ngIf="isModalShown" [config]="{ show: true }" (onHidden)="onHidden()"
     bsModal #bookingModal="bs-modal" class="modal fade login-modal-view wf-login-modal" tabindex="-1" role="dialog"
     aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-body">
        <div class="wf-modal-title">
          <div class="wf-watermark">RESERVATION</div>
          <div class="text">预约看房</div>
        </div>
        <form class="login-form form-horizontal" [formGroup]="bookingForm">
          <div class="form-group">
            <label class="col-sm-2 control-label">公寓</label>
            <div class="col-sm-10">
              <select name="department"
                      formControlName="buzProduct"
                      (change)="loadLayoutType()"
                      [(ngModel)]="apartmentId"
                      class="form-control">
                <option *ngFor="let item of departments" [value]='item.id'>{{item.name}}</option>
              </select>
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-2 control-label">房型</label>
            <div class="col-sm-10">
              <select name="department" formControlName="buzItem" class="form-control">
                <option *ngFor="let item of typeList" [value]='item.id'>{{item.name}}</option>
              </select>
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-3 control-label">看房日期</label>
            <div class="col-sm-10 datepicker-box">
              <app-datepicker (sendDate)="getDate($event)"></app-datepicker>
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-2 control-label">姓名</label>
            <div class="col-sm-10">
              <input class="form-control" name="name" formControlName="name" placeholder="请输入真实姓名">
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-2 control-label">性别</label>
            <div class="col-sm-10 control-sex">
                <label class="ui-radio" style="margin-right: 40px;">
                  <input name="sex" [value]="1" type="radio" formControlName="sex">
                  <span>男</span>
                </label>
                <label class="ui-radio">
                  <input name="sex" [value]="2" type="radio" formControlName="sex">
                  <span>女</span>
                </label>
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-2 control-label">手机号
            </label>
            <div class="col-sm-10">
              <input class="form-control"
                     name="phone" formControlName="phone"
                     placeholder="请输入手机号" required>
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-2 control-label">验证码</label>
            <div class="col-sm-6">
              <input class="form-control" name="verify"
                     formControlName="verifyCode" placeholder="请输入验证码">
            </div>
            <div class="col-sm-4">
              <button class="form-control bg-green" (click)="doVerify()"
                      [disabled]="bookingForm.get('phone').invalid||disabled">
                {{getVerTitle}}
              </button>
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-10 col-sm-offset-2">
              <button class="login-btn form-control bg-green"
                      [disabled]="!bookingForm.valid" (click)="doBooking()">
                提交
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
